<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <div id="app">
    <a href="/home">首页</a>
    <a href="/about">关于</a>

    <div class="router-view"></div>
  </div>

  <script>
    //vue路由中 history模式的URL中没有#，用户在输入一个URL时，服务器会接收这个请求，并解析这个URL，然后返回对应的页面。 特点: 当使用history模式时，URL就像这样: http://abc.com/user/id。相比hash模式更加好看。但是，historv模式需要后台配置支持。如果后台没有正确配置，访问时刷新页面会返回404

    //history原理:使用history中的pushstate对浏览器的历史记录进行修改。在页面的URL发生变化时，获取history历史对象URL，然后根据URL来渲染对应的组件。使用onpopstate事件监听浏览器的前进后退，执行相应的url，


    // 获取router-view的DOM
    const routerViewEl = document.getElementsByClassName("router-view")[0];

    // 1.点击所有链接时,获取所有的a元素, 自己来监听a元素的改变
    const aEls = document.getElementsByTagName("a");
    for (let el of aEls) {
      el.addEventListener("click", e => {
        e.preventDefault();
        const href = el.getAttribute("href"); //获取a元素的href属性
        //通过历史对象-推入状态
        history.pushState({}, "", href);
        console.log('history存入后', history);
        urlChange();
      })
    }

    //2.点击前进后退执行返回操作时(通过历史对象-取出状态), 依然来到urlChange
    window.addEventListener('popstate', urlChange);

    // 监听URL的改变
    function urlChange() {
      console.log('history历史对象', history);
      switch (location.pathname) {
        case "/home":
          routerViewEl.innerHTML = "首页";
          break;
        case "/about":
          routerViewEl.innerHTML = "关于";
          break;
        default:
          routerViewEl.innerHTML = "";
      }
    }

  </script>
</body>

</html>